<template>
  <n-layout>
    <n-layout-header style="padding: 10px; -webkit-app-region: drag" bordered>
      <div class="header-bar">
        <div class="left-bar">Client testing tools for Electron</div>
        <div class="right-bar">
          <n-button size="small" quaternary @click="minimize">
            <template #icon>
              <n-icon>
                <MinusOutlined />
              </n-icon>
            </template>
          </n-button>
          <n-button size="small" quaternary @click="closeApp">
            <template #icon>
              <n-icon>
                <CloseOutlined />
              </n-icon>
            </template>
          </n-button>
        </div>
      </div>
    </n-layout-header>
    <n-layout has-sider>
      <n-layout-sider
        :collapsed="collapsed"
        @collapse="collapsed = true"
        @expand="collapsed = false"
        collapse-mode="width"
        :width="180"
        show-trigger="arrow-circle"
        content-style="padding: 0 24px;"
        bordered
      >
        <n-menu
          :default-expanded-keys="['mockMessage']"
          :default-value="'mockMessage'"
          :collapsed="collapsed"
          :collapsed-icon-size="22"
          :options="menuOptions"
          @update-value="changeRoute"
        />
      </n-layout-sider>
      <n-layout-content
        :style="{
          padding: '0 2px',
          height: 'calc(100vh - 48px)',
        }"
      >
        <router-view>
          <template #default="{ Component, route }">
            <keep-alive>
              <component
                :is="Component"
                v-if="route.meta.keepAlive"
                :key="route.meta?.key"
              />
            </keep-alive>
            <component
                :is="Component"
                v-if="!route.meta.keepAlive"
                :key="route.fullPath"
              />
          </template>
        </router-view>
        <n-back-top />
      </n-layout-content>
    </n-layout>
  </n-layout>
</template>

<script setup lang="ts">
import {
  NLayout,
  NLayoutHeader,
  NLayoutSider,
  NLayoutContent,
  MenuOption,
  NMenu,
  NButton,
  NIcon,
  NBackTop,
} from "naive-ui";
import {
  CloseOutlined,
  InfoCircleOutlined,
  MessageOutlined,
  MinusOutlined,
} from "@vicons/antd";
import { h, ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const menuOptions: MenuOption[] = [
  {
    label: "消息模拟",
    key: "mockMessage",
    icon: () => h(MessageOutlined),
  },
  {
    label: "关于",
    key: "about",
    icon: () => h(InfoCircleOutlined),
  },
];
const collapsed = ref(true);

const changeRoute = (val: string) => {
  router.push(val);
};

// 最小化
const minimize = () => {
  window.electron.ipcRenderer.send("minimize-window");
};
// 关闭
const closeApp = () => {
  window.electron.ipcRenderer.send("close-window");
};
</script>
<style lang="less" scoped>
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  .left-bar {
    font-size: 16px;
    font-weight: bold;
  }
  .right-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    -webkit-app-region: no-drag;
  }
}

.log-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  line-height: 1.5;
  .header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.125rem;
  }
  .message {
    font-size: 12px;
    color: #888;
    white-space: pre-wrap;
    // 超出三行省略
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}
.file-info {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.5;
  user-select: none;
  &:last-child {
    margin-bottom: 0;
  }
  .title {
    font-size: 14px;
    font-weight: bold;
  }
  .path {
    font-size: 14px;
    color: #888;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.file-content {
  margin-top: 20px;
  font-size: 14px;
  color: #888;
  max-width: 400px;
}
:deep(.n-layout-sider-scroll-container) {
  padding: 0 !important;
}
</style>
